<template>
  <div>
    <!-- <van-search v-model="value" show-action placeholder="搜索" @search="onSearch">
      <template #action>
        <div @click="onSearch">搜索</div>
      </template>
    </van-search>-->
    <van-tree-select
      :main-active-index.sync="activeIndex"
      :items="geosList"
      @click-nav="clickNav"
      value-key="name"
    >
      <template #content>
        <div
          class="main"
          v-show="activeIndex == index"
          v-for="(item, index) in geosList"
          :key="index"
        >
          <div class="province">{{ item.name }}</div>
          <van-row gutter="20" justify="space-around">
            <van-col
              :class="cityActive == item1.code ? 'textoverflow1 active' : 'textoverflow1'"
              v-for="(item1, index1) in item.children"
              :key="index1"
              span="8"
              @click="cityClick(item1, index1)"
            >{{ item1.name }}</van-col>
          </van-row>
          <div class="fuzheren">
            <div class="textoverflow1">
              <span class="left">负责人：</span>
              <span class="fuzeren">{{ teacherList.truename }}</span>
            </div>
            <div>
              <span class="left">咨询热线：</span>
              <a :href="'tel:' + teacherList.phone">{{ teacherList.phone }}</a>
            </div>
            <div class="textoverflow3">
              <span class="left">联系地址：</span>
              <span class="fuzeren">{{ teacherList.address }}</span>
            </div>
            <div>
              <span class="left">微信号：</span>
              <!-- <img :src="require('../../../assets/img/erweima.png')" alt /> -->
              <img v-if="teacherList.visit_card" :src="teacherList.visit_card" alt />
            </div>
          </div>
        </div>
      </template>
    </van-tree-select>
  </div>
</template>

<script>
import { handleTree } from '@/utils'
import { getContact } from '@/api/mine/contact-us'
import { geosList } from '@/api/user'
// import { getProfile } from '@/api/mine/personal'
export default {
  data() {
    return {
      geosList: [],
      // profileList: null,
      activeIndex: 0,
      cityActive: '',
      teacherList: {}
    }
  },

  computed: {
    profileList() {
      return JSON.parse(localStorage.getItem('profileList')) || {}
    }
  },

  mounted() {
    // console.log(this.profileLists)
    this.geos()
    document.title = '联系我们'
    this.goPAGE()
    window.onresize = () => {
      return (() => {
        this.goPAGE()
      })()
    }
  },

  methods: {
    async geos() {
      await geosList().then(res => {
        const arr = handleTree(
          res.data.filter(b => b.depth !== 3),
          'code'
        )
        arr.map(b => {
          b.text = b.name
        })
        this.geosList = arr
      })
      // await getProfile().then(res => {
      //   this.profileList = res.data.member
      // })
      await this.getInfo()
    },
    getInfo() {
      if (this.profileList && (this.profileList.area || this.profileList.profile)) {
        const profile = this.profileList.area ? this.profileList.area[0] : this.profileList.profile
        this.geosList.forEach((b, index) => {
          if (b.code === profile.province) {
            this.activeIndex = index
          }
        })
        this.$nextTick(() => {
          this.cityActive = profile.city
          this.fetchList()
        })
      } else {
        this.cityActive = this.geosList[this.activeIndex].children[0].code
        this.fetchList()
      }
    },
    // 获取首页数据
    fetchList() {
      const data = {
        city: this.cityActive
      }
      getContact(data).then(res => {
        this.teacherList = res.data[0] || res.data || {}
      })
    },
    // 搜索
    onSearch() { },
    clickNav(index) {
      this.cityActive = this.geosList[index].children[0].code
      this.fetchList()
    },
    cityClick(row) {
      this.cityActive = row.code
      this.fetchList()
    },
    goPAGE() {
      if (
        navigator.userAgent.match(
          /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
        )
      ) {
        console.log('mobile')
      } else {
        window.location.href = 'https://www.wangpaiyixue.cn/#/contact'
        console.log('pc')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .van-search {
  background: #f7f7f7;
  .van-search__content {
    background: #fff;
  }
}
::v-deep .van-tree-select {
  // margin-top: 60px;
  height: calc(100vh) !important;
  .van-tree-select__nav {
    flex: none;
  }
  .van-sidebar {
    width: 90px !important;
  }

  .van-sidebar-item__text {
    font-size: 15px;
    font-weight: bold;
    color: #333333;
  }
  .van-sidebar-item--select::before {
    display: none;
  }
}
.main {
  padding-left: 15px;
  .province {
    font-size: 14px;
    font-weight: 400;
    color: #666666;
    line-height: 45px;
  }
  .fuzheren {
    box-sizing: border-box;
    width: calc(100% - 15px);
    height: 247px;
    padding: 15px;
    margin-right: 15px;
    background: url('@/assets/images/lianxiwomen.png');
    background-size: 100% 100%;
    .left {
      display: inline-block;
      width: 74px;
      font-size: 14px;
      font-weight: 400;
      color: #666666;
      line-height: 30px;
    }
    .fuzeren {
      display: contents;
    }

    .dizhi {
      display: inline-block;
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #333333;
    }
    a {
      font-size: 14px;
      font-weight: bold;
      text-decoration: underline;
      color: #219d9e;
    }
    img {
      width: 60px;
      height: 60px;
      vertical-align: text-top;
    }
  }
}

::v-deep .van-row {
  height: calc(100vh - 320px);
  overflow-x: hidden;
  overflow-y: scroll;
  margin-bottom: 20px;
  .van-col {
    width: 30%;
    height: 26px;
    margin: 0 3% 15px 0;
    padding: 0px !important;
    line-height: 26px;
    text-align: center;
    background: #ffffff;
    border: 1px solid #dddddd;
    border-radius: 2px;
  }
}
.active {
  color: #009697;
  background: #e2f4f4 !important;
}
</style>
